<template>
  <div class="container">
    <div class="header">
      <van-nav-bar title="我的认养" left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="panel_box">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :offset="offsetBottom">
          <div class="van-panel" v-for="(item,index) in adoptList.list" :key="index">
            <div class="title">
              <span>{{item.shopName}}</span>
              <span @click="toFarmIndex(item)" class="arrow">
                查看视频或地址
                <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
              </span>
            </div>
            <div class="animal_info active">
              <ul class="top">
                <li>
                  <img :src="item.product_image_url" alt>
                </li>
                <li>{{item.product_name}}</li>
                <li>
                  <img src="../assets/images/zky_edit.png" alt>
                </li>
              </ul>
              <ul class="bottom">
                <li
                  v-for="(it,eq) in item.goods_spec_format"
                  :key="eq"
                >{{it.spec_name}}：{{it.spec_value_name}}</li>
              </ul>
              <p>认养时间：{{item.pay_time||'暂无'}}</p>
              <p>订单编号：{{item.serial_number}}</p>
            </div>
            <ul class="status_list">
              <li>
                <p>养殖利润</p>
                <p>{{item.profit_scale*100}}%</p>
              </li>
              <li>
                <p>分利周期</p>
                <p>{{item.profit_cycle}}个月</p>
              </li>
              <li>
                <p>认领期限</p>
                <p>{{item.farm_cycle}}天</p>
              </li>
            </ul>
            <ul class="status_img">
              <li @click="toFarmingState(item)">
                <img src="../assets/images/zky-icon1.png" alt>
                <p>养殖状态</p>
              </li>
              <li>
                <img src="../assets/images/zky-icon2.png" alt>
                <p>我要培养</p>
              </li>
              <li>
                <img src="../assets/images/zky-icon3.png" alt>
                <p>认养领回</p>
              </li>
            </ul>
          </div>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: "myAdopt",
  data() {
    return {
      adoptList: {},
      //下拉刷新
      isLoading: false,
      //上拉加载
      loading: false,
      finished: false,
      offsetBottom: 50,
      pageNum: 1,
      listArry: []
    };
  },
  mounted() {
    var token = this.$cookies.get('token')||localStorage.getItem('token');
      let u = navigator.userAgent;
            let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
            let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            let message={
                orderId:this.orderId,
                formData:this.formData
            }
             if (!token) {
              if (isAndroid) {
                  console.warn('ecologylogin');
                } else if (isiOS) {
                  window.webkit.messageHandlers.goBackLogin.postMessage(null);
                }
        };

     
    
    this.getAdoptList();
  },
  methods: {
    onClickLeft() {
       this.$router.back();
        window.webkit.messageHandlers.toBackNearFarm.postMessage(null);
    },
    //下拉刷新
    onRefresh() {
       this.listArry=[];
        this.pageNum=1;
        this.finished = false;
      this.getAdoptList();
    },
    //上拉加载
    onLoad() {
      if (this.adoptList.list && this.adoptList.list.length > 0) {
        this.getAdoptList();
      }
    },
    //获取列表数据
    async getAdoptList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: 10
      };
      const res = await this.$axios.post(this.$api.myFramOrderList, params);
      if (res.success) {
        if (this.loading) {
          this.listArry = this.listArry.concat(res.data.list);
          this.adoptList = res.data;
          this.adoptList.list = this.listArry;
          if (this.adoptList.list.length >= this.adoptList.total) {
            this.finished = true;
          } else {
            this.pageNum++;
          }
        } else {
          this.adoptList = res.data;
          if (this.adoptList.list.length >= this.adoptList.total) {
            this.finished = true;
          }
        }

        this.adoptList.list.forEach((item, index) => {
          if (typeof item.goods_spec_format=="string") {
            item.goods_spec_format = JSON.parse(item.goods_spec_format);
          }
          if(item.goods_spec_format){
          item.goods_spec_format.forEach((at, eq) => {
            at.spec_value_name = at.value[0].spec_value_name;
          });
           };

        });
        this.isLoading = false;
        this.loading = false;
        // console.log(this.adoptList.list);
      } else {
        this.$toast(res.msg);
      }
    },
    toFarmingState(item) {
      this.$router.push({
        path: "/farmingState",
        query: {
          farmInfoId: item.farmInfoId,
          imgUrl: item.product_image_url,
          product_name: item.product_name
        }
      });
    },
    toFarmIndex(item) {
       let params={
        itemData:item
      };
      window.webkit.messageHandlers.goToFarmIndex.postMessage(params);
    }
  }
};
</script>

<style scoped>
@import "../assets/css/farmingState.css";
.arrow{
  display:flex;
  display:-webkit-flex;
  align-items: center;
}
.container {
  padding-top: 0.46rem;
}
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}
</style>
